<template>
<div>
  <el-dialog
    title="发起仓库异常"
    :visible.sync="dialogVisible"
    center
    :close-on-click-modal="false"
  >
    <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="包件编号:">
            {{obj.packNo}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商家名称:">
            {{obj.cargoOwnerName}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所属产品:">
            {{obj.belongProduct}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="包件名称:">
            {{obj.packName}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="异常类型:" prop="abnormalCode">
            <el-select v-model="model.abnormalCode" class="input-max-w" placeholder="请选异常务类型">
              <el-option v-for="item of abnormalArr" :label="item.text" :value="item.value" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异常包件:" prop="abnormalPacks">
            <el-input v-model="model.abnormalPacks">
              <span slot="suffix">件</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="异常描述:" prop="abnormalMemo">
            <el-input type="textarea" v-model="model.abnormalMemo">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div style="padding: 0px 25px">
            <Upload-image v-model="model.abnormalPicture" ref="UploadImage" :formData="{group: obj.locationPackId}" :max="5"></Upload-image>
          </div>
        </el-col>
        <el-col :span="24">
          <span style="color: #FF0000;line-height: 45px;padding-left: 25px">
            确认发起后，该包件会按照发起数量异常出库，异常处理结果会确认是否再次入库。
          </span>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary"
                 @click="launchAbnormal"
                 :loading="loading">确认发起</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
import {getAbnormalType} from '@/utils/selectOptions'
import {range, isInteger} from '@/utils/validate'
export default {
  name: 'launchModal',
  components: {},
  props: {
    obj: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      model: {
        abnormalCode: '',
        abnormalPacks: '',
        abnormalMemo: '',
        abnormalPicture: []
      },
      abnormalArr: [],
      rules: {
        abnormalCode: [
          { required: true, message: '请选择异常类型', trigger: 'change' }
        ],
        abnormalPacks: [
          { required: true, message: '请输入异常包件数', trigger: 'blur' },
          { validator: range, min: 1, max: 999, message: '请输入1~3位的整数', trigger: 'blur' },
          { validator: isInteger, message: '请输入1~3位的整数', trigger: 'blur' }
        ],
        abnormalMemo: [
          { required: true, max: 100, message: '请输入1~100字内', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    getAbnormalType().then(arr => {
      this.abnormalArr = arr || []
    })
  },
  methods: {
    show() {
      this.dialogVisible = true
      this.$nextTick(_ => {
        this.model.abnormalPicture = []
        this.resetForm()
      })
    },
    launchAbnormal() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.model.abnormalPicture && !this.model.abnormalPicture.length) {
          this.$message({
            type: 'warning',
            message: '请选择要上传的图片！'
          })
          return
        }
        this.loading = true
        console.log('this.model', this.model)
        this.model.orderId = this.obj.locationPackId
        this.model.abnormalSouce = '1'
        this.$ajax.post('/ms-warehouse-order/orderAbnormal/startAbnormal', this.model).then(response => {
          this.loading = false
          if (response.success) {
            this.$emit('refresh')
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '发起成功!'
            })
          }
        })
      })
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>
